import React, { FC } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

import { OrderDetail } from '@/constants/commonType'
import './index.scss'

interface OpenModal {
  title: string
  content: string
}
interface PageProps {
  orderDetail: OrderDetail
  getOrderDetail?: () => void
  // 打开支付弹窗
  openPay: (value: number) => void
  orderDetailIndex?: number
  openModal: (OpenModal) => void
}

const OrderBtnState: FC<PageProps> = ({ orderDetail, openPay, orderDetailIndex, openModal }) => {
  return (
    <View className='orderBtnState flex'>
      {orderDetail.buttonList.paymentButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openPay(orderDetailIndex as number)
          }}
        >
          去支付
        </View>
      )}

      {orderDetail.buttonList.deliveryButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openModal({
              title: '确认发货',
              content: '确认发货吗？',
              type: 'deliveryAction',
              orderId: orderDetail.orderId
            })
          }}
        >
          确认发货
        </View>
      )}

      {orderDetail.buttonList.cancelButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openModal({
              title: '取消订单',
              content: '确定取消订单吗？',
              type: 'orderCancel',
              orderId: orderDetail.orderId
            })
          }}
        >
          取消订单
        </View>
      )}
      {orderDetail.buttonList.receiptButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openModal({
              title: '确认收货',
              content: '确认收货吗？',
              type: 'receiptAction',
              orderId: orderDetail.orderId
            })
          }}
        >
          确认收货
        </View>
      )}
      {orderDetail.buttonList.returnReceiptButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openModal({
              title: '归还收货',
              content: '确认定归还收货吗？',
              type: 'receiptReturn',
              orderId: orderDetail.orderId
            })
          }}
        >
          归还收货
        </View>
      )}
      {orderDetail.buttonList.returnDeliveryButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openModal({
              title: '归还发货',
              content: '确定归还发货吗',
              type: 'deliveryReturn',
              orderId: orderDetail.orderId
            })
          }}
        >
          确认归还
        </View>
      )}
      {orderDetail.buttonList.disputesButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openModal({
              title: '纠纷选择',
              content: '确定选择纠纷吗',
              type: 'orderDispute',
              orderId: orderDetail.orderId
            })
          }}
        >
          纠纷
        </View>
      )}
      {orderDetail.buttonList.evaluationButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={() => {
            Taro.navigateTo({
              url: '/pages/OrderList/AddEvaluate/index?orderId=' + orderDetail.orderId
            })
          }}
        >
          评价
        </View>
      )}
      {orderDetail.buttonList.disputesDetailButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={() => {
            Taro.navigateTo({
              url: '/pages/OrderList/DisputeList/index?orderId=' + orderDetail.orderId
            })
          }}
        >
          查看纠纷
        </View>
      )}
      {orderDetail.buttonList.evaluationDetailButton === '1' && (
        <View
          className='orderBtnState-btnList__eval orange-btn font26'
          onClick={() => {
            Taro.navigateTo({
              url: '/pages/OrderList/SeeEvaluate/index?orderId=' + orderDetail.orderId
            })
          }}
        >
          查看评价
        </View>
      )}
      {orderDetail.buttonList.deleteButton === '1' && (
        <View
          className='orderBtnState-btnList__deleteOd grey-btn font26'
          onClick={(e) => {
            e.stopPropagation()
            openModal({
              title: '删除订单',
              content: '确认删除订单吗？',
              type: 'deleteOrder',
              orderId: orderDetail.orderId
            })
          }}
        >
          删除订单
        </View>
      )}
    </View>
  )
}

export default OrderBtnState
